<script setup lang="ts">
type PropsState = {
  list: any[]
  chapterIndex: number
}
const props = withDefaults(defineProps<PropsState>(), {
  chapterIndex: -1,
  list: () => {
    return []
  }
})
const emit = defineEmits(['change'])
const chapterChange = (e: number) => {
  emit('change', e)
}

const scrollSelect = (index: number) => {
  const activeEl = document.querySelectorAll('.zj-item')[index]
  activeEl?.scrollIntoView()
}
onMounted(() => {
  nextTick(() => {
    scrollSelect(props.chapterIndex)
  })
})
defineExpose({
  scrollSelect
})
</script>

<template>
  <div class="zj-list">
    <div
      class="zj-item hover-shadow"
      :class="{ active: index === chapterIndex }"
      v-for="(item, index) in list"
      :key="item.id"
      @click="chapterChange(index)"
    >
      {{ item.name }}
      <span>{{ item.remark }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.zj-list {
  .zj-item {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    &:hover {
      color: #fff;
    }
  }
  .active {
    color: #2fca48 !important;
  }
}
</style>
